<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色选择器</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .an-color-wrapper {
            position: relative;

            & .an-color-trigger {
                width: 30px;
                height: 30px;
                border: 1px solid;
                border-radius: 5px;
            }

            & .an-color-picker {
                position: absolute;
                top: 35px;
                left: 0;
                padding: 20px;
                width: 300px;
                height: 300px;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }

            & .an-color-pallete {
                width: 100%;
                height: 250px;
                border: 1px solid;
            }

            & .an-color-slider {
                position: relative;
                margin-block-start: 10px;
                width: 100%;
                height: 10px;
                border-radius: 10px;
                cursor: pointer;
                background-image: linear-gradient(90deg, red,
                        rgb(255, 255, 0) 16.66%,
                        rgb(0, 255, 0) 33.33%,
                        rgb(0, 255, 255) 50%,
                        rgb(0, 0, 255) 66.66%,
                        rgb(255, 0, 255) 83.33%,
                        red);

                & .an-color-thumb {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    border: 2px solid rgb(255, 255, 255, .8);
                }
            }
        }
    </style>
</head>

<body>
    <div class="an-color-wrapper">
        <div class="an-color-trigger"></div>
        <div class="an-color-picker">
            <div class="an-color-pallete"></div>
            <div class="an-color-slider">
                <div class="an-color-thumb"></div>
            </div>
        </div>
    </div>

    <script>

    </script>
</body>

</html>